<template>
    <div class="card">
        <div class="cover">
            <img :src="item.picUrl + '?imageView=1&type=webp&thumbnail=247x0'" alt="">
        </div>
        <div class="volume">
            <div class="icon-erji"></div>
            <span>{{ formatCount }}</span>
        </div>

        <span class="desc">{{ item.name }}</span>
    </div>
</template>

<script>
export default {
    props: {
        item: Object,
    },
    data() {
        return {

        }
    },

    computed: {
        formatCount() {
            let count = this.item.playCount
            let m = (count / 10000).toFixed(1)
            let b = (m / 10000).toFixed(1)
            if (m < 0) {
                return count
            } else if (m < 10000) {
                return (m === Math.floor(m) ? Math.floor(m) : m) + '万'
            }
            return (b === Math.floor(b) ? Math.floor(b) : b) + '亿'
        }
    }
}
</script>
<style lang='scss' scoped>
.card {
    position: relative;
    width: 33%;
    margin-bottom: 16px;

    .cover {
        img {
            width: 100%;
        }
    }

    .volume {
        position: absolute;
        top: 5px;
        right: 2px;
        display: flex;
        align-items: center;
        color: #fff;
        font-size: 12px;

        .icon-erji {
            width: 12px;
            height: 12px;
            margin-right: 2px;
            background: url('../../images/palyCount.svg') no-repeat;
            background-size: contain;
        }
    }

    .desc {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        padding: 0px 2px 0 6px;
        font-size: 13px;
        line-height: 1.2;
    }
}
</style>